<template>
	<div class="key_word">
		<el-input
			placeholder="请输入内容"
			v-model="value.search_content"
			style="width:260px"
			@input="inputChange"
		>
			<cl-select
				v-model="value.keyword_type"
				slot="prepend"
				placeholder="类型"
				@change="selectChange"
			>
				<template v-if="type == 1">
					<el-option
						v-for="(item, index) in keyWordType"
						:key="index"
						:label="item.label"
						:value="item.value"
					></el-option>
				</template>
				<template v-if="type == 2">
					<el-option
						v-for="(item, index) in keyAddWxType"
						:key="index"
						:label="item.label"
						:value="item.value"
					></el-option>
				</template>
			</cl-select>
		</el-input>
	</div>
</template>
<script>
export default {
	name: "cl-keyword-search",
	props: {
		value: {
			type: Object,
			default: () => ({})
		},
		type: {
			type: Number,
			default: 1 // 1:通用，2:加微配置
		}
	},

	data() {
		return {};
	},
	watch: {},
	methods: {
		inputChange() {
			const { value } = this;
			this.$emit("update", value);
		},
		selectChange(val) {
			this.value.keyword_type = val;
			this.inputChange();
		}
	}
};
</script>
<style lang="scss" scoped>
.key_word {
	::v-deep .el-input-group__prepend {
		// padding: 0 30px !important;
		padding-right: 20px !important;
		padding-left: 20px !important;
		background-color: #fff;
	}
	::v-deep .el-select {
		min-width: 100px;
	}
}
</style>
